@charset "utf-8";
@import "reset";
@function r($px){
	@return $px/100px*1rem;
}
html{
	//height: 100%;
	body{
		//height: 100%;
		.web{
			padding-top: r(89px);
			padding-bottom: r(96px);
			//height: 100%;
			header{
				width: r(640px);
				height: r(89px);
				background-color: #b20000;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 r(16px);
				color: white;
				position: fixed;
				top:0;
				img{
					width: r(263px);
				}		
			}
			.more{
				//height: 15%;
				p{
					font-size: r(30px);
					text-align: center;
					color: #C5C5C5;
				}
			}
			.content{
				//overflow: scroll;
				.b-img{
					width: r(640px);
					height: r(357px);
					position: relative;
					img{
						width:100%;
						height: 100%;			
					}
					.img-news{
						width:r(640px);
						height: r(106px);
						background-color: rgba(0,0,0,0.5);
						position: absolute;
						bottom: 0;
						// filter:alpha(Opacity=80);
						// -moz-opacity:0.5;
						// opacity: 0.5;
						p:first-child{
							font-size: r(25px);
							color: white;
							margin: 0 r(31px);
							margin-top: r(29px);
						}
						p:nth-of-type(2){
							font-size: r(25px);
							color: white;
							margin: 0 r(31px);
							display: flex;
							justify-content: space-between;
						}
					}
				}
				.first_News{
					display: flex;
					justify-content: space-between;
					margin: r(15px) r(17px);
					.news_Left{
						width: r(330px);
						height: r(121px);
						p{
							font-size: r(30px);
							align-items: center;
						}
						p:nth-of-type(2){
							display: flex;
							justify-content: space-between;
							font-size: r(20px);
							margin-top: r(10px);
							color: #c5c5c5;
						}
					}
					.news_Right{
						width: r(211px);
						height: r(121px);
						img{
							width:100%;
							height:100%;
						}
					}
					
				}
				hr{
					height: 1px;
					margin: r(17px);
				}
				.second{
					.second_News{
						width: r(582px);
						height: r(180px);
						font-size: r(28px);
						margin: 0 r(17px);
						margin-top: r(30px);
						.news_Img{
							display: flex;
							justify-content: space-between;
							img{
								width: 30%;
							}
						}
						.text2{
							display: flex;
							justify-content: space-between;
							font-size: r(20px);
							color: #C5C5C5;
						}
					}
					.second_News_2{
						margin: 0 r(17px);
						display: flex;
						justify-content: space-between;
						.n_Left{
							width: r(330px);
							height: r(121px);
							p{
								font-size: r(30px);
								margin: r(10px) 0;
							}
							p:nth-of-type(2){
								display: flex;
								justify-content: space-between;
								font-size: r(20px);
								align-items: center;
								color: #C5C5C5;
							}
						}
						.n_Right{
							width: r(211px);
							height: r(121px);
							img{
								width: 100%;
								height: 100%;
							}
						}
					}		
				}
			}
			.footer_Nav{
				width:r(640px);
				height: r(96px);
				background-color: #f5f5f5;
				position: fixed;
				bottom:0;
				display: flex;
				justify-content: space-around;
				font-size: 0;
				div{
					height: 100%;
					//width: 20%;
					margin-top: r(10px);
					font-size: r(20px);
					//align-items: center;
					text-align: center;
					display: block;
					color: #8b8b8b;
					p{
						text-align: center;
						i{
							font-size: r(55px);
						}
					}	
				}
				div:nth-of-type(3){
					color: red;
				}
			}
			.list{
				width:100%;
				height: 100%;
				background-color: #303030;
				transform: translateX(-100%);
				position: fixed;
				top:0;
				overflow: scroll;
				.list_header{
					color:#fefcfd;
					height: r(100px);
					background-color: #21201c;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 r(17px);
					font-size: r(31px);
					.colse{}
					.search_header{
						position: relative;
						.sousuo{
							position: absolute;
							top: r(10px);
							margin-left: 6px;
						}
						.search_input{
							
							input[type="search"]{
								width: r(500px);
								height: r(58px);
								border-radius: 10px;
								border:solid #fefcfd 0.5px;
								padding-left: r(60px);
								padding-right: r(20px);
								background-color:#1f1f1f ;
								color: white;
							}
						}
					}
				}
				hr{
					margin: 0 10px;
					border: 0.5px solid #524e4d;
				}
				.login{
					background-color: #222222;
					height: r(450px);
					position: relative;
					padding-top: r(100px);
					.login_img{
						width: r(180px);
						height: r(180px);
						border-radius: 50%;
						margin: 0 auto;
						// position: absolute;
						// top: r(100px);
						img{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.login_A{
						    width: 50%;
							margin: 0 auto;
							font-size: r(50px);
							p{
								color: white;
								text-align: center;
								a{
									font-size: r(30px);
									color: #505050;
								}
							}
					}
				}
				.operate{
					position: relative;
					background-color: #222222;
					margin-top: r(15px);
					//height: 300px;
					.first{		
						color: white;
						font-size: r(30px);
						padding: r(20px);
						label{
							display: flex;
							justify-content: space-between;
						}		
					}	
					input{
						//display: contents;
						position: absolute;
						top: 0;
						visibility: hidden;
					}
					input:checked + div{
						max-height: r(200px);
						transition: all 1s;
					}
					.second{
						max-height: 0;
						overflow: hidden;
						color: white;
						font-size: 15px;
						text-align: center;
						//padding: r(20px) 0;
						p{
							padding: r(20px) 0;
						}
					}
				}
			}
			.search{
				width: 100%;
				height: 100%;
				background-color: #f1f1f1;
				transform: translateY(100%);
				position: fixed;
				top:0;
				left:0;
				.hotword{
					p{
						font-size: r(40px);
						margin: r(24px) r(34px);
					}
				}		
				.one{
					color:#fefcfd;
					height: r(100px);
					background-color: #1f1f1f;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 r(17px);
					font-size: r(31px);
					.search_box{
						width: r(500px);
						position: relative;
						.search_icon{
							padding-left: r(10px);
							position: absolute;
							top:r(10px);
						}
						.search_1{
							input[type="search"]{
								width: r(500px);
								height: r(58px);
								border-radius: 10px;
								border:solid #fefcfd 0.5px;
								padding-left: r(60px);
								padding-right: r(20px);
								background-color:#1f1f1f ;
								color: white;
						}
					}		
				}
			}
		    .search_world{
		    	margin-left: r(34px);
		    	margin-right: 40px;
				
		    	.line{
		    		display: flex;
		    		justify-content: space-between;
					padding: r(10px) 0;
		    		p{
		    			font-size: r(30px);
						//border: 1px solid black;
						background-color: white;
						padding: r(10px);
		    		}
		    	}
		    }
		}
	}
}
}